class MyElement extends HTMLElement {
  constructor() {
      super();
      this.now = new Date();

      const shadowRoot = this.attachShadow({mode:'open'});
      shadowRoot.innerHTML = this.template();
  }
  connectedCallback() {
      console.log('my-date element is connected');
  }
  template() {
      return `
      <link rel="stylesheet" href="../../../static/css/weadmin.css">
      <link href="../../../lib/layui/css/layui.css" rel="stylesheet">
      <!-- 顶部结束 -->
      <!-- 中部开始 -->
      <!-- 左侧菜单开始 -->
      <div class="left-nav">
        <div class="logo">
          <a href="./index.html"><img src="../../../static/images/logo.png" alt="" srcset=""></a>
        </div>
        <div class="nav-cent">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree use-black" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="javascript:;"><i class="iconfont use-home"></i> <span>首页</span></a>
          </li>
          
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="javascript:;"><i class="iconfont use-information-hall"></i> <span>资料大厅</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>全部资料</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>我的资料</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>我共享的</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>回收站</span></a></dd> 
            </dl>
          </li>
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-task"></i> <span>任务大厅</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>全部任务</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>我发起的</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>我参与的</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>任务统计</span></a></dd> 
            </dl>
          </li>
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-invite"></i> <span>招标大厅</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>全部招标模板</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>我收藏的</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>招标文件查看</span></a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-design"></i> <span>设计大厅</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>图纸分类</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>全部图纸</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>我的图纸</span></a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-cost"></i> <span>造价大厅</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>增值服务</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>权益数据</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>历史账单</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>发票管理</span></a></dd> 
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>账户管理</span></a></dd> 
            </dl>
          </li>
          
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-team"></i> <span>项目团队</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>全部项目团队</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>我创建的</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>我加入的</span></a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-board"></i> <span>数据看板</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>数据概览</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>成员活跃数据</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>消息使用情况</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>云文档使用情况</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>日程使用情况</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>视频会议使用情况</span></a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont use-board"></i> <span>系统设置</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>员工管理</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>角色管理</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>企业信息</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>个人信息</span></a></dd>
            </dl>
          </li>
          <!-- <li class="layui-nav-item">
            <a class="" href="javascript:;"><i class="iconfont "></i> <span>首页</span></a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span>生源列表</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>学校信息</span></a></dd>
              <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>工做计划</span></a></dd>
            </dl>
          </li> -->
        </ul>
      </div>
    </div>
        <div class="left_open">
          <i title="展开左侧栏" class="iconfont use-fold"></i>
        </div>
      </div>
      <!-- <div class="x-slide_left"></div> -->
      <!-- 左侧菜单结束 -->
      <!-- 右侧主体开始 -->
      <div class="page-content">
        <!-- 顶部开始 -->
        <div class="container">
          <span class="page-title">
            <i class="layui-icon layui-icon-set-fill"></i>账号设置
          </span>
    
          <div class="right">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="iconfont  use-search"></i>
              </div>
              <input type="text" placeholder="Search..." class="layui-input">
            </div>
            
            <!-- 铃铛 -->
            <div class="badge">
              <i class="layui-icon layui-icon-dialogue"></i>
              <span class="layui-badge">6</span>
            </div>
            
            <!-- 用户 -->
            <div class="user">
              <div class="avatar">
                <!-- 头像 -->
                <img src="../../../static/images/logo.png" class="img">
                <!-- 标记 -->
                <img src="../../../static/images/Frame.png" class="tag">
              </div>
    
              <div class="user-name" id="ID-dropdown-user-name" lay-options="{trigger: 'hover'}">
                用户名 
                <i class="layui-icon layui-font-12 layui-icon-down"></i>
              </div>
            </div>
          </div>
          
    
    
       
    
        </div>
        <div class="page-main">
            <slot></slot>
        </div>
      </div>`;
  }
}
customElements.define('use-body', MyElement);

